<template>
  <div class="mv-list" ref="mvList">
    <ul>
      <li class="mvList-li" v-for="(item,index) in mvList" :key="index">
        <div class="mvList-li-pic">
          <!-- mvPicture -->
          <img v-lazy="item.video_info.cover_pic" alt="">
        </div>
        <div class="mvList-content">
          <!-- mvTitle -->
          <div class="mvList-content-title">{{item.video_info.name}}</div>
          <!-- mvDesc -->
          <div class="mvList-content-desc">{{item.video_info.singers[0].name}}</div>
        </div>
      </li>
    </ul>
    <!-- 没有数据时显示加载状态 -->
    <div class="loading" v-show="mvList.length===0 ? 1:0">
      <Loading />
    </div>
  </div>
</template>

<script>
import Loading from 'base/loading/Loading'
export default {
  components: {
    Loading
  },
  props: {
    mvList: {
      type: Array,
      default: null
    }
  },
  data() {
    return {
      // mvList: []
    }
  },
  methods: {
    
  },
}
</script>

<style scoped lang="scss">
@import "@/assets/css/mixin.scss";

</style>
